/*
 * @Author: zeki mini
 * @Date: 2021-01-19 16:32:47
 * @LastEditors: zeki mini
 * @LastEditTime: 2021-02-03 17:56:27
 * @Description: 创建订单item
 */
import React, { Component } from 'react';
import { StyleSheet, View, Text, Image } from 'react-native';
import { px2dp,fontColorCoffee,splitLineColorLightGray } from '../../../../../common/styles';
import VerticalLine from '../../source/components/VerticalLine';
import FlagView from '../../source/components/FlagView';
import { _ } from '../../../../../common';
import { iconTime, iconTon } from '../../../../../image';
import supply from '../../../../../api/supply';

export default class CreatOrderItem extends Component {
    constructor(props) {
        super(props);
        const { logisticsObj } = this.props;
        this.state = {
            unitList:[],
            ...logisticsObj
        }
    }
    goodsDetails = () => {
        const { goodsDetails } = this.props;
        goodsDetails && goodsDetails();
    }
    

    checkStatus = (status) => {
        // 合同状态 1进行中 2完成 3到期
        if(status==1){
            return (
                <View style={styles.foo}>
                    <Text style={styles.gooStatus}>进行中</Text>
                </View>
            )
        }else if(status==2){
            <View style={styles.foo}>
                    <Text style={styles.fooStatus}>已完成</Text>
                </View>
        }else if(status==4){
            <View style={styles.foo}>
                    <Text style={styles.fooStatus}>已到期</Text>
                </View>
        }
    }

    //转义单位
    matchingUnit(unit) {
        const { unitList } = this.props
        if (!unit || unitList.length === 0) {
            return '';
          }
        if(unitList.length > 0){
            const unitName = unitList.filter(u => u.code === unit);
            if (unitName.length > 0) {
                return unitName[0].name;
            }
            return unit;
        }
            return unit;
    }
    render() {
        const { isHistory } = this.props;
        const { weight, truckLength, publishTime, ifCollect, surplusEffectiveDays, contractStatus, weightUnit } = this.state;
        const { startAddress,endAddress,parentGoodsTypeName, packagingTypeName } = this.state
        const partTime = publishTime && publishTime.substring(5, 16);
        const truckLenList = truckLength && truckLength.split(',') || [];
        const showFav = ifCollect == 1 ? true : false;
        return (
            <View style={styles.contaner}>
                <View>
                    <View style={styles.itemTop}>
                       <View style={styles.foo}>
                            <Image style={styles.fooIcon} source={iconTime}/>
                            {surplusEffectiveDays ? (
                                <Text>{surplusEffectiveDays}天</Text>
                            ) : (
                                <Text>无限期</Text>
                            )}
                       </View>
                       <View style={[styles.foo,styles.fooCenter]}>
                            <Image style={styles.fooIcon} source={ iconTon}/>
                            <Text>{
                                weight ? (
                                    <Text>{weight}{this.matchingUnit(weightUnit)} </Text>
                                ):(
                                    <Text>无限量</Text>
                                )
                            }</Text>
                       </View>

                       {this.checkStatus(contractStatus)}
                    </View>
                    <View style={styles.oneBox}>
                        <View style={styles.leftAddress}>
                            <FlagView tips="起" colors={isHistory ? ["#CDCCC9", "#CDCCC9"] : ['#7EE35E', '#2CBD26']} />
                            <Text numberOfLines={1} style={[styles.addrTip, isHistory && styles.isHistoryAddr]}>{startAddress?startAddress:''}</Text>
                        </View>
                        <View style={styles.marginBottomStyle}>
                            <Text numberOfLines={2} style={styles.twoBox}>
                                {parentGoodsTypeName}
                                <VerticalLine />
                                {packagingTypeName}
                            </Text>
                        </View>
                        <View style={styles.middleAddress}>
                            <FlagView tips="终" colors={isHistory ? ["#CDCCC9", "#CDCCC9"] : ['#F48F25', '#EB2F2F',]} />
                            <Text numberOfLines={1} style={[styles.addrTip, isHistory && styles.isHistoryAddr]}>{endAddress?endAddress:''}</Text>
                        </View>
                    </View>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    contaner: {
        // flex: 1,
        backgroundColor: '#FFFFFF',
        borderRadius: px2dp(6) * 2,
        marginTop: px2dp(12) * 2,
        marginLeft: px2dp(12) * 2,
        marginRight: px2dp(12) * 2,
        paddingLeft: px2dp(12) * 2,
        paddingRight: px2dp(12) * 2,
        paddingTop: px2dp(16) * 2,
        paddingBottom: px2dp(12) * 2,
        height: px2dp(155 * 2)
    },
    itemTop:{
        flexDirection:'row',
        borderBottomWidth:px2dp(1),
        borderBottomColor:splitLineColorLightGray,
        paddingBottom:px2dp(20),
        marginBottom:px2dp(20)
    },
    foo:{
        flexDirection:'row',
        alignItems:'center',
        height: px2dp(36),
        
    },
    fooCenter:{
        flex:1,
        marginLeft:px2dp(36)
    },
    fooIcon:{
        width:px2dp(26),
        height:px2dp(26),
        marginRight:px2dp(12)
    },
    rightIcon:{
        width:px2dp(24),
        height:px2dp(24)
    },
    qianyue:{
        color: fontColorCoffee
    },
    oneBox: {
        // flex: 1,
        // flexDirection: 'row',
        // justifyContent: 'center',
        // alignItems: 'center'
    },
    leftAddress: {
        // flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        // width: px2dp(300)
    },
    addrTip: {
        color: '#343332',
        fontSize: px2dp(14) * 2,
        marginLeft: px2dp(8) * 2,
        marginRight: px2dp(30) * 2
    },
    isHistoryAddr: {
        color: '#666562'
    },
    middleAddress: {
        // flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
    },
    rightAddress: {
        flexDirection:'row',
        marginTop:px2dp(20),
        marginBottom:px2dp(40),
        justifyContent:'flex-end',
        alignItems: 'flex-end',
    },
    rightCancelIcon: {
        width: px2dp(12) * 2,
        height: px2dp(12) * 2
    },
    dispBasic: {
        fontSize: px2dp(36),
        color: '#EB2F2F',
    },
    danwei:{
        color: '#EB2F2F',
        fontSize:px2dp(24),
        marginBottom:px2dp(4),
        marginRight:px2dp(4)
    },
    twoBox: {
        // flex: 1,
        flexWrap: 'wrap',
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: px2dp(5) * 2,
        lineHeight: px2dp(25) * 2
    },
    twoItem: {
        fontSize: px2dp(13) * 2,
        color: '#666562',
        lineHeight: px2dp(30) * 2
    },
    isHistoryTip: {
        color: '#999896'
    },
    threeBox: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',

    },
    timeWrap: {
        flex: 1,
        justifyContent: 'center'
    },
    createDate: {
        color: '#999896',
        fontSize: px2dp(13) * 2
    },
    handleStyle: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end'
    },
    cancelWrap: {
        backgroundColor: '#FFFFFF',
        borderRadius: px2dp(4) * 2,
        borderColor: '#CDCCC9',
        borderWidth: px2dp(1),
        paddingTop: px2dp(4) * 2,
        paddingBottom: px2dp(4) * 2,
        paddingLeft: px2dp(22) * 2,
        paddingRight: px2dp(22) * 2

    },
    cancelTet: {
        color: '#999896'
    },
    marginBottomStyle: {
        paddingBottom: px2dp(20),
        marginLeft: px2dp(50),
    }

});